<!--查看帖子页面-->
<template>
  <div style="padding:0;display: flex;height: 100vh;background-color: #e4e4e4;
    background-image: url(https://s1.hdslb.com/bfs/static/stone-free/dyn-home/assets/bg.png@1c.avif)">

      <!-- 左侧用户信息卡片   -->
      <div class="user-left">
        <div style=" display: grid;place-items: center;">
          <el-image
              :src="BASE_URL+userArr.imgUrl"
              fit="cover"
              style="width: 50px; height: 50px; border-radius: 50%;">
          </el-image>
        </div>

        <p style="text-align: center">{{ userArr.username }}</p>

        <p style="  overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4; /* 控制显示的最大行数 */-webkit-box-orient: vertical;
                  width: 100%;
                  white-space: pre-line;color: #666666;font-weight: bolder">
          {{ userArr.profile }}</p>

        <el-divider/>

        <div>
          <div class="info-item">
            <el-icon>
              <School/>
            </el-icon>
            <span class="label">学校:</span>
            <span class="filler"></span>
            <span class="content">{{ userArr.schoolName }}</span>
          </div>
        </div>
      </div>
<!--  右侧卡片  -->
      <div class="right">
        <div>
        <!--标题-->
          <h1>{{blogArr.title}}</h1>
          <span>发布时间:{{blogArr.createTime.split(" ")[0]}}</span>
        <!--正文-->
          <div v-html="blogArr.content" style="min-height: 30%"></div>
          <!--评论，递归显示-->
          <el-button @click="dialogVisible = true;">评论帖子</el-button>
          <div>
            <h1>评论列表</h1>
            <Comment @comment-added="loadComment" :comments="comments"/>
            <el-divider />
          </div>

        </div>
      </div>

  </div>
<!--评论弹窗-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
             :before-close="handleClose"
             style="width: 1000px;padding:40px;">
    <el-form label-position="top" label-width="80px">
      <el-form-item label="评论">
        <el-input placeholder="请输入你的评论" v-model="content">
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveComment">发送</el-button>
    </template>
  </el-dialog>

</template>

<script setup>
import {useRoute} from 'vue-router';
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import router from "@/router";
import Comment from './Comment.vue';
//获取当前用户登录信息
const user = ref(getUser());
// 定义一个响应式数据来存储评论
const comments = ref([]);
//获取当前用户登录信息
//弹窗标题
const dialogTitle = ref('回复评论');
//弹窗是否出现
const dialogVisible = ref(false);
//定义变量保存评论内容
const content = ref();


// 在挂载时获取评论数据
const loadComment=()=>{
  console.log("发送查询评论请求")
    axios.get(BASE_URL+'/v1/comment/'+blogId).then((response) => {
      if (response.data.code == 2000) {
        comments.value = response.data.data;
        console.log(response.data.data);
      } else {
        ElMessage.error(response.data.msg);
      }
    })
}
//保存帖子信息
const blogArr = ref({id: '',userId:'', username: '', title: '', content: '', imgUrl: '', type: '', createTime: ''});
//保存用户信息
const userArr = ref({
  id: '',
  username: '',
  age: '',
  gender: '',
  imgUrl: '',
  phone: '',
  email: '',
  profile: '',
  createTime: '',
  schoolName: ''
})
const route = useRoute();
const blogId = route.params.blogId;
//定义方法对帖子进行评论
const saveComment = () => {
  if (!content.value){
    alert('请输入评论内容');
    return;
  }
  let data=qs.stringify({
    content:content.value,
    userId:user.value.id,
    blogId:blogId
  })
  console.log('新增评论数据' + data);
  axios.post(BASE_URL + '/v1/comment/save', data).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('评论成功!');
      dialogVisible.value = false;//关闭弹窗
      content.value = '';//清空评论的值，否则再次打开弹窗还是之前的值
      loadComment();
      //新增评论后，都需要重新加载数据
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
//处理弹窗关闭的方法
const handleClose = () => {
  if (confirm('确定关闭本窗口吗?')) {
    //用户确认关闭后,关闭弹窗
    dialogVisible.value = false;
    //清空已输入的表单数据
  }
}
//根据bolgId查帖子信息
const loadBlog=()=>{
  axios.get(BASE_URL+'/v1/blog/select?id='+blogId).then((response) => {
    if (response.data.code == 2000) {
      blogArr.value = response.data.data[0];
      console.log(response.data.data)
      loadUser();
    } else {
      ElMessage.error(response.data.msg);
    }
})
}
//根据查出来的userId查用户数据
const loadUser=()=>{
  console.log(blogArr.value.userId)
  axios.get(BASE_URL+'/v1/user/select?id='+blogArr.value.userId).then((response) => {
    if (response.data.code == 2000) {
      userArr.value = response.data.data[0];
      console.log(response.data.data)
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
onMounted(() => {
  loadBlog();
  loadComment();
});
const back=()=>{
  blogArr.value = '';
  userArr.value = '';
  router.push('/home');
}
</script>

<style scoped>
.user-left {
  width: 300px;
  padding: 10px;
  height: 400px;
  background-color: #fff;
  margin: 15px 50px 0 10px;
}
.right {
  padding: 10px;
  width: 60%;

  background-color: #fff;
  margin: 15px 50px 0 10px;
  display: flex;
  flex-direction: column; /* 使卡片垂直排列 */
  gap: 20px; /* 卡片间的间隔 */
  overflow-y: auto;

}
.comments-section {
  padding: 20px;
}
</style>